<template>
	<view>
		<view class="">
			
		
		<canvas canvas-id="my-point" style="width: 100%;height: 400rpx;border: #808080 1px solid;" @touchstart="startFunc"
		 @touchmove="moveFunc"></canvas>
		 <button type="default" @click="getImage">获取图片</button>
		<image :src="imgUrlConfirm" mode="widthFix" ></image>
		</view>
	<navigator url="../mine/mine?from=画布">调到我的</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startX: null,
				startY: null,
				imgUrl: '',
				imgUrlConfirm: ''
			};
		},
		onReady() {
			this.ctx = uni.createCanvasContext('my-point')
		},
		methods: {
			startFunc(e) {
				const {
					x,
					y
				} = e.touches[0]
				this.startX = x
				this.startY = y
				// console.log(e)
			},
			moveFunc(e) {
				const {
					x,
					y
				} = e.touches[0]
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(x, y)
				this.ctx.stroke()
				// this.ctx.draw(true)
				this.ctx.draw(true,()=>{
					wx.canvasToTempFilePath({
					  x: 0,
					  y: 0,
					  width: 750,
					  height: 400,
					  destWidth: 750,
					  destHeight: 400,
					  canvasId: 'my-point',
					  success:(res)=> {
					    this.imgUrl = res.tempFilePath
					  }
					})
				})
				// 重新赋值
				this.startX = x
				this.startY = y
			},
			getImage(){
				// console.log(Image)
				this.imgUrlConfirm = this.imgUrl
				console.log(this.imgUrl)
				uni.downloadFile({
				  url: this.imgUrlConfirm, //仅为示例，并非真实的资源
				  success (res) {
						console.log(res)
				  }
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
